<template>
  <div class="footer-box">
    <div class="footer-content">
      <div class="img-list">
        <div class="qrcode">
          <div>
            <el-image class="imgstyle" :src="lightercode" fit="cover" />
          </div>
          <div class="qrfont">
            微信公众号<br />
            立即关注
          </div>
        </div>
        <div class="qrcode">
          <div>
            <el-image class="imgstyle" :src="ceoercode" fit="cover" />
          </div>
          <div class="qrfont">
            创始人微信<br />
            立即咨询
          </div>
        </div>
      </div>
      <div class="find-us">
        <div class="top-font">找到我们</div>
        <div class="font-base dot-style" style="margin-top: 50px">
          上海 / 闵行区新龙路1333弄万科国际28幢511-516
        </div>
        <div class="font-base dot-style" style="margin-top: 28px">
          济南 / 高新区颖秀路2600号山东大学科技产业园内
        </div>
        <div class="font-base dot-style" style="margin-top: 28px">
          北京 / 朝阳区百字湾路今日美术馆东侧
        </div>
      </div>
      <div>
        <div class="top-font">商务合作</div>
        <div class="font-base" style="padding-top: 50px;font-family: BebasFontEn">
          4000-662-169 <br />
          light_brand@163.com
        </div>
        <div class="font-base" style="padding-top: 25px">
          +86 18810111677 <br />
          +86 15168883633
        </div>
      </div>
      <div class="">
        <div class="top-font">关注我们</div>
        <div class="icon-list">
          <iconChange @click="goToExternalSite('xhs')" :baseImg="xhs" :activeImg="xhsactive" />
          <iconChange @click="goToExternalSite('zcool')" :baseImg="zcool" :activeImg="zcoolactive" />
          <iconChange @click="goToExternalSite('gtn')" :baseImg="gtn" :activeImg="gtnacrive" />
          <iconChange @click="goToExternalSite('be')" :baseImg="be" :activeImg="beactive" />
        </div>
      </div>
    </div>
    <div class="bottom-flr">
      <div class="font-basel" style="padding-top: 120px">
        京ICP备18030404号-1
      </div>
      <div class="about-web" style="padding-top: 5px">
        ® 2021-2025 LIGHT BRANDING. Rights Reserved by LIGHT BRANDING.
      </div>
    </div>
  </div>

</template>

<script>
import scrollHandle from "@/components/scrollHandle.vue";
import lightercode from "@/assets/imgs/lightercode.png";
import ceoercode from "@/assets/imgs/ceoercode.png";

import xhs from "@/assets/imgs/xhs.png";
import xhsactive from "@/assets/imgs/xhsactive.png";
import zcool from "@/assets/imgs/zcool.png";
import zcoolactive from "@/assets/imgs/zcoolactive.png";
import gtn from "@/assets/imgs/gtn.png";
import gtnacrive from "@/assets/imgs/gtnacrive.png";
import be from "@/assets/imgs/be.png";
import beactive from "@/assets/imgs/beactive.png";

import iconChange from "@/components/iconChange.vue";
export default {
  name: "LightWebListBody",
  components: {
    iconChange,
    scrollHandle,
  },
  data() {
    return {
      lightercode: lightercode,
      ceoercode: ceoercode,
      xhs: xhs,
      xhsactive: xhsactive,
      zcool,
      zcoolactive,
      gtn,
      gtnacrive,
      be,
      beactive,
    };
  },

  mounted() { },

  methods: {
    goToExternalSite(val) {
      let _url = ''
      switch (val) {
        case 'xhs':
        _url = 'https://www.xiaohongshu.com/user/profile/5c3a0c0300000000050318f8?xsec_token=ABegkCwP6AvD0hi1qeMZurmw2G03jwdcSRAUMYzuAm9LQ=&xsec_source=pc_search';
          break;
        case 'zcool':
        _url= 'https://www.zcool.com.cn/u/24556197';
          break;
        case 'gtn':
        _url = 'https://www.gtn9.com/user_center.aspx?categories=0&subclass=0&id=40B7C9BD5A23F45E';
          break;
        case 'be':
        _url = 'https://www.behance.net/light15';
          break;
      }
      window.open(_url, '_blank');
    }
  },
};
</script>
<style lang="scss" scoped>
.footer-box {
  width: 100%;
  background-color: #000;
}

.footer-content {
  margin: 0 auto;
  max-width: 1920px;
  width: 100%;
  padding: 100px 90px 0;
  display: flex;
  justify-content: space-between;
  font-family: "BebasFont";
  color: #fff;
}

.imgstyle {
  width: 140px;
  height: 140px;
}

.img-list {
  display: flex;
}

.qrcode {
  margin-right: 33px;
  text-align: left;
}

.qrfont {
  padding-top: 30px;
  font-size: 27px;
  line-height: 32px;
  color: #fff;
}

.floor-right {
  display: grid;
  color: #fff;
  text-align: left;
  grid-template-columns: 2.3fr 1fr 147px;
  grid-gap: 100px;
  padding-left: 120px;
}

.find-us {
  min-width: 400px;
  font-size: 24px;
}

.top-font {
  font-size: 32px;
  color: #898989;
}

.font-base {
  font-size: 27px;
  line-height: 32px;
}

.font-basel {
  font-size: 25px;
  font-family:BebasFontB;
}

.dot-style {
  position: relative;
  padding-left: 25px;
}

.dot-style::before {
  content: '';
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.bottom-flr {
  width: 100%;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 40px;
}

.about-web {
  font-size: 16px;
  font-family: BebasFontEn
}

.icon-list {
  padding-top: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
}
</style>